<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>杨静</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="story" style="width: 600px;border: solid;">
        <h1 align="center">我爱的古诗词</h1>
        <div align="center" style="background-color:rgb(108, 67, 147)">
            <input type="text" v-bind:value="poetry[0].value"><button id="show" type="button"
                @click="flag=!flag">{{flag?"收起":"展开"}}</button>
        </div>
        <div v-show="flag" v-for=" s in poetry" :key="s.name">
            {{s.value}}
        </div>

    </div>

    <script>
        new Vue({
            el: "#story",
            data: {
                flag: false,
                poetry: [{ "name": "0", "value": "无题" },
                { "name": "1", "value": "相见时难别亦难，东风无力百花残。" }, {
                    "name": "2"
                    , "value": "春蚕到死丝方尽，蜡炬成灰泪始干。"
                }, { "name": "3", "value": "晓镜但愁云鬓改，夜吟应觉月光寒。" }, {
                    "name": "4"
                    , "value": "蓬山此去无多路，青鸟殷勤为探看。"
                }]
            },
            methods: {

            }
        }) 
    </script>
</body>

</html>
